<template>
  <div>
    <el-card class="box-card loginCl">
      <div slot="header" class="clearfix">
        <h3 style="align-content: center;text-align: center">{{loginurl}}用户登录</h3>
      </div>
      <div class="text item">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-row class="row-class">
            <el-col :span="24"><div class="grid-content bg-purple-light">
            <el-form-item label="用户名" prop="username">
              <el-input v-model.number="ruleForm.username"></el-input>
            </el-form-item>
            </div>
            </el-col>
          </el-row>
          <el-row class="row-class">
            <el-col :span="24"><div class="grid-content bg-purple-light">
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
            </el-form-item>
            </div>
            </el-col>
          </el-row>

            <div>
          <el-form-item style="align-content: center;text-align: center">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button @click="cancel">取消</el-button>
            <el-button @click="register">注册</el-button>
          </el-form-item>
            </div>

        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "LoginVue",
  props:{
    loginurl:String
  },
  data(){
    return{
      ruleForm:{
        username:'',
        password:''
      },
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 10个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请选输入密码', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    login() {
      // eslint-disable-next-line no-unused-vars
      let url = 'api/user/login/'+this.ruleForm.username+'/'+this.ruleForm.password
      // eslint-disable-next-line no-unused-vars
      this.$axios.get(url).then(r=>{
        console.log(r.data)
        if (r.data != null){
          sessionStorage.setItem('username',this.ruleForm.username)
          this.$store.state.username = this.ruleForm.username
          this.$store.state.headphoto ='http://127.0.0.1:8080'+r.data.userHead
          console.log(this.$store.state.headphoto)
          this.$router.push('/mainpage')
          // eslint-disable-next-line no-empty
          this.$message.success("登录成功")
          this.$emit("closeWind")
        }else {
          this.username=''
          this.password=''
          this.$message.warning("账号或密码错误")
        }
      })
    },
    cancel() {
      this.ruleForm.username=''
      this.ruleForm.password=''
    },
    register(){
      this.$router.push("/register")
    }
  }
}
</script>

<style scoped>
.loginCl{
  margin:10% 20% 50% 20%;
  width:40%
}
.row-class{
  margin-right: 15%;
  margin-left: 10%;
}
</style>